<template>
    <div :class="['cell-wrapper', wrapperType === 'TABLE_CELL' ? 'cell-wrapper-left' : '']" :style="wrapperStyleMap[wrapperType]">
        <slot />
    </div>
</template>

<script>
    import { computed, defineComponent } from 'vue'
    export default defineComponent({
        props: {
            wrapperType: {
                type: String,
                default: 'TABLE_CELL'
            }
        },
        setup() {
            // 不同类型对应的样式
            const wrapperStyleMap = {
                SHADOW: 'visibility: hidden;',
                TABLE_CELL: 'position: absolute; top: 0; bottom: 0; left: 0; right: 0;'
            }

            return {
                wrapperStyleMap
            }
        }
    })
</script>

<style lang="less" scoped>
    .cell-wrapper {
        width: 100%;
        padding: 0 24px;
        display: flex;
        align-items: center;
    }
</style>
